<script setup>
import ResultTable from '@/components/ResultTable.vue'
import { ref } from 'vue'
const props = defineProps({
  // 表格数据
  dataSource: {
    type: Array,
    default: () => [],
  },
  // 分页总数
  total: {
    type: Number,
    default: 0,
  },
  // 表格加载状态
  loading: {
    type: Boolean,
    default: false,
  },
  page: {
    type: Number,
    default: 1,
  },
  pageSize: {
    type: Number,
    default: 10,
  },
})

const emit = defineEmits(['change', 'update:page', 'update:pageSize'])

// 表格列数据
const columns = ref([
  {
    title: '序号',
    key: 'index',
    align: 'center',
    // 🚨注意：表格序号自动递增，分页后也不影响
    customRender: ({ index }) => (props.page - 1) * props.pageSize + index + 1,
  },
  {
    title: '订单编号',
    width: 160,
    dataIndex: 'id',
  },
  {
    title: '运单编号',
    width: 160,
    dataIndex: ['transportOrder', 'id'],
  },
  {
    title: '下单时间',
    width: 160,
    dataIndex: 'createTime',
  },
  {
    title: '订单状态',
    width: 100,
    dataIndex: 'status',
    customRender: ({ status }) => {
      if (status === 22000) {
        return '已关闭'
      } else if (status === 23000) {
        return '待取件'
      } else if (status === 23001) {
        return '已取件'
      } else if (status === 23002) {
        return '网点自寄'
      } else if (status === 23003) {
        return '网点入口'
      } else {
        return '已签收'
      }
    },
  },
  {
    title: '发件人姓名',
    width: 100,
    dataIndex: 'senderName',
  },
  {
    title: '发件人电话',
    width: 100,
    dataIndex: 'senderPhone',
  },
  {
    title: '发件人地址',
    width: 100,
    dataIndex: 'senderAddress',
  },
  {
    title: '收件人姓名',
    width: 100,
    dataIndex: 'receiverName',
  },
  {
    title: '收件人电话',
    width: 100,
    dataIndex: 'receiverPhone',
  },
  {
    title: '收件人地址',
    width: 100,
    dataIndex: 'receiverAddress',
  },
  {
    title: '取件类型',
    width: 100,
    dataIndex: 'pickupType',
    customRender: ({ pickupType }) => {
      if (pickupType === 1) {
        return '网点自寄'
      } else {
        return '上门取件'
      }
    },
  },
  {
    title: '付费类型',
    width: 80,
    dataIndex: 'paymentMethod',
    customRender: ({ paymentMethod }) => {
      if (paymentMethod === '1') {
        return '预结'
      } else {
        return '到付'
      }
    },
  },
  {
    title: '付费状态',
    width: 80,
    dataIndex: 'paymentStatus',
    customRender: ({ paymentStatus }) => {
      if (paymentStatus === '1') {
        return '未付'
      } else {
        return '已付'
      }
    },
  },
  {
    title: '操作',
    fixed: 'right',
    key: 'operation',
    align: 'center',
    width: 100,
    customCell: (record) => record,
  },
])

// 表格数据
const onChange = ({ current, pageSize }) => {
  // 更新页码和页容量
  emit('update:page', current)
  emit('update:pageSize', pageSize)
  // 触发父组件的 change 事件
  emit('change', { page: current, pageSize: pageSize })
}
</script>

<template>
  <ResultTable
    :columns="columns"
    :data-source="dataSource"
    :page="page"
    :page-size="pageSize"
    :loading="loading"
    :total="total"
    @change="onChange"
    :scroll="{ x: 1600 }"
  >
    <!-- 具名作用域插槽 -->
    <template #bodyCell="{ column, record }">
      <!-- 操作 -->
      <template v-if="column.key === 'operation'">
        <!-- 传参：orderId=${}&status=${}&pickupType=0&transportOrderId=12313 -->
        <a-button type="link" @click="$router.push(`/business/viewdetail?id=${record.id}`)"
          >查看详情</a-button
        >
      </template>
    </template>
  </ResultTable>
</template>
